<template>
  <div class="table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal" />
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="sizeChange(20)">
        <template #headerLeft>
          <a-button type="primary" @click="show('add')" v-if="$authPass('express.address.saveOrUpdate')">添加</a-button>
        </template>
        <template #tableBody>
          <a-table size="mini" class="table-singe-line show-border-table" ref="table" :loading="loading" row-key="id" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: '100%' }">
            <template #columns>
              <a-table-column title="名称" #cell="{ record, rowIndex }" :width="80">
                {{ record.name }}
              </a-table-column>
              <a-table-column title="类型" #cell="{ record, rowIndex }" :width="80">
                {{ filterType(record.type) }}
              </a-table-column>
              <a-table-column title="联系人" #cell="{ record, rowIndex }" :width="80">
                {{ record.contactor }}
              </a-table-column>
              <a-table-column title="手机号" #cell="{ record, rowIndex }" :width="80">
                {{ record.mobilePhone }}
              </a-table-column>
              <a-table-column title="国家/地区" #cell="{ record, rowIndex }" :width="80">
                {{ record.country }}
              </a-table-column>
              <a-table-column title="省/州" #cell="{ record, rowIndex }" :width="80">
                {{ record.stateOrRegion }}
              </a-table-column>
              <a-table-column title="城市" #cell="{ record, rowIndex }" :width="80">
                {{ record.city }}
              </a-table-column>
              <a-table-column title="地址" #cell="{ record, rowIndex }" :width="200">
                <a-popover>
                  <span>{{ record.address }}</span>
                  <template #content>
                    <p>{{ record.address }}</p>
                  </template>
                </a-popover>
              </a-table-column>
              <a-table-column title="操作" #cell="{ record, rowIndex }" :width="60">
                <a-button type="text" style="color: red" @click="del(record.id)" v-if="$authPass('express.address.del')">删除</a-button>
                <a-button type="text" style="margin-left: 5px" @click="show('edit', record)" v-if="$authPass('express.address.saveOrUpdate')">编辑</a-button>
              </a-table-column>
            </template>
          </a-table>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>

  <Detail ref="detail" :type="type" :info="info" @save="sizeChange(20)" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { pageExpressAddress, delExpressAddress } from '@/api/warehouse'
  import { Modal, Message } from '@arco-design/web-vue'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import Detail from './components/addressDetail.vue'

  export default defineComponent({
    components: { FilterTable, TableWrap, Detail },
    setup() {
      const detail = ref()
      const data: any = reactive({
        filterItem: [
          {
            key: 'name',
            label: '地址名称',
            value: ref(),
            type: 'input_search',
            width: 260,
          },
        ],
        tableList: [],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        loading: false,
        searchValue: {},
        type: 'add',
        info: {},
      })

      const searchByVal = (info: any) => {
        data.searchValue = {}
        data.searchValue = info
        data.pageNation.pageNum = 1
        getList()
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const getList = async () => {
        let params = {
          ...data.searchValue,
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.loading = true
        const res: any = await pageExpressAddress(params)
        if (res.code == 'SUCCESS') {
          data.tableList = res.data?.records || []
          data.pageNation.total = res.data.total
        }
        data.loading = false
      }

      const show = (type: string, info?: any) => {
        data.info = info
        data.type = type
        detail.value.visible = true
      }

      const filterType = (val: string) => {
        let text = ''
        switch (val) {
          case 'ship':
            text = '发货地址'
            break
          case 'collect':
            text = '揽收地址'
            break
          case 'return':
            text = '退货地址'
            break
          case 'reply':
            text = '回邮地址'
            break
        }
        return text
      }

      const del = (val: string) => {
        Modal.error({
          title: '提示',
          content: '是否删除？',
          titleAlign: 'start',
          cancelText: '取消',
          hideCancel: false,
          onBeforeOk: async (done) => {
            const res: any = await delExpressAddress({ idList: [val] })
            if (res.code == 'SUCCESS') {
              done(true)
              Message.success('删除成功')
              sizeChange(20)
            }
          },
        })
      }

      getList()

      return {
        ...(toRefs(data) as any),
        changePage,
        sizeChange,
        searchByVal,
        filterType,
        detail,
        show,
        del,
      }
    },
  })
</script>

<style lang="less" scoped></style>
